<template>
  <div class="todo-footer" v-show="total">
    <label for="">
      <!-- <input type="checkbox" :checked="isAll" @click="checkAll"> -->
      <!-- isAll 是计算属性 并不是props 故可以修改 -->
      <input type="checkbox" v-model="isAll">
    </label>
    <span>
      <span>已完成{{doneTotal}}</span>/全部{{todos.length}}
    </span>
    <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
  </div>
</template>

<script>
  export default {
    name: "MyFooter",
    props: ['todos'],
    computed: {
      total() {
        return this.todos.length;
      },
      doneTotal() {
        // let arr = this.todos.filter(item => item.done == true);
        // return arr.length;

        /* const x = this.todos.reduce((pre, current) => {
          console.log('@', pre, current)
          return pre + (current.done ? 1 : 0);
        }, 0);

        return x; */

        return this.todos.reduce((pre, todo) => pre + (todo.done == 1 ? 1 : 0), 0)
      },
      /* 
        isAll() {
          return this.total === this.doneTotal && this.total > 0
        }
      */
      isAll: {
        get() {
          return this.total === this.doneTotal && this.total > 0
        },
        set(value) {
          // this.checkAllTodo(value)
          this.$emit("checkAllTodo", value)
        }
      }
    },
    methods: {
      // checkAll(e) {
      //   this.checkAllTodo(e.target.checked)
      // }
      clearAll() {
        // this.clearAllTodo();
        this.$emit('clearAllTodo');
      }
    }
  }
</script>

<style lang="less" scoped>
  .todo-footer {
    padding-left: 8px;
    .btn {
      display: block;
    }
  }
</style>